<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>更新时候的一个小bug</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body> 
    <!-- 准备一个容器 -->
    <div id="root">
      <!-- 遍历数组 -->
      <h2>人员列表</h2> 
      <button @click="updateMei">点我更新马冬梅信息</button> 
      <ul>
        <li v-for="(p,index) in persons" :key="p.id">
          {{p.name}} - {{p.age}} - {{p.sex}}
        </li>
      </ul>

    </div>
</body>
<script type="text/javascript" >
    Vue.config.productionTip = false; // 组织 Vue 在启动时生成生产提示

    const vm = new Vue({
        el: '#root',
        data:{ 
          persons: [
            {id:'001', name:'马冬梅', age: 31, sex: '女'},
            {id:'002', name:'周冬雨', age: 29, sex: '女'},
            {id:'003', name:'周杰伦', age: 20, sex: '男'},
            {id:'004', name:'温兆伦', age: 22, sex: '男'}
          ] 
        }, 
        methods: {
          updateMei(){
            // 奏效
            // this.persons[0].name = '马老师'
            // this.persons[0].age = 50
            // this.persons[0].sex = '男'
            // 不奏效
            // this.persons[0] = {id:'001', name:'马老师', age: 50, sex: '男'}
            this.persons.splice(0, 1, {id:'001', name:'马老师', age: 50, sex: '男'})
          }
        },
    })
</script>
</html>